<template>
  <div class="Chief-Fourteen" chief-style-set>
    <Title title='个人结算' more :MoreUrl='MoreJump(this, "PersonalSettlement", 2)'></Title>
    <div class="content-h-auto Fourteen-box" chief-style-set>
      <el-tabs v-model="activeName" @tab-click="handleClick" style="height:100%;">
         <el-tab-pane  name="1">
          <span slot="label">考核<span> ( {{AssessmentList.length}} )</span></span>
          <div class="Box-item" v-for="(item,index) in AssessmentList" :key="index + 'PrincipalList'" :title="item.name">· {{item.vitem}}</div>
        </el-tab-pane>
        <el-tab-pane  name="2">
          <span slot="label">完成<span> ( {{CompleteList.length}} )</span></span>
          <div class="Box-item" v-for="(item,index) in CompleteList" :key="index + 'PrincipalList'" :title="item.name">· {{item.vitem}}</div>
        </el-tab-pane>
        <el-tab-pane  name="3">
          <span slot="label">扣罚<span> ( {{PunishList.length}} )</span></span>
          <div class="Box-item" v-for="(item,index) in PunishList" :key="index + 'PrincipalList'" :title="item.name">· {{item.vitem}}</div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import { rptVisPrjPersonitem } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "Chief-Fourteen",
  components: {
    Title
  },
  data () {
    return {
      activeName: "1",
      AssessmentList: [],
      CompleteList: [],
      PunishList: [],
      MoreJump
    };
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      rptVisPrjPersonitem(1).then(res => {
        if (res.status === 200) {
          this.AssessmentList = res.data.data;
        }
      });
      rptVisPrjPersonitem(2).then(res => {
        if (res.status === 200) {
          this.CompleteList = res.data.data;
        }
      });
      rptVisPrjPersonitem(3).then(res => {
        if (res.status === 200) {
          this.PunishList = res.data.data;
        }
      });
    },
    handleClick (item) {
      console.log(item);
    }
  }
};
</script>

<style lang='less'>
.Chief-Fourteen{
  .Fourteen-box{
    overflow: hidden;
    .Box-item{
      padding: 1vh 0;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>